<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<title>AdminWrap - Easy to Customize Bootstrap 4 Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style2.css" rel="stylesheet">

</head>
<style>
	.aui-info {
		position: relative;
	}
	
	.fileInput {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0;
		display: block;
		width: 3.5rem;
		clear: both;
		display: block;
		margin: auto;
		background-color: red;
	}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	$(function() {
	    $.ajax({
	    	url:"${pageContent.request.contentPath}/Movies/UserServlet",
	    	type:"post",
	    	dataType:"json",
	    	data:{
	    		op:"getUserInfo",
	    		userName:$(".card-title").text()
	    	},
	    	success:function(result,status,xhr){
	    		if ("0"==result) {
					alert("更新失败")
				} else {
				    $(".card-subtitle:eq(1)").text(result[0].memberStatus=="0"?"非会员":"会员");
				    $("#userName").val(result[0].userName);
				    $("#userContact").val(result[0].userContact);
				    $("#userIntro").val(result[0].userIntro);
				    getUserPic(result);
				}
	    	},
	    	error:function(xhr,status,error){
	    		alert("请求失败")
	    	}
	    })
	    
		$("#userPicture").change(function() {
			var url = window.URL.createObjectURL(this.files[0]);
			$(".img-circle").prop("src", url);
		});
	    
	    function getUserPic(result) {
           var fileName = "${pageContent.request.contentPath}/Movies/FileDownloadServlet?fileName="+result[0].userPicture;
           $(".img-circle").prop("src",fileName);
        }
		
	})
</script>
<body>
	<div class="page">
		<div class="container">
			<div style="padding-top: 50px"></div>

			<!-- Row -->
			<form class="form-horizontal form-material" id="userInfo"
				method="post" action="${pageContent.request.contentPath}/Movies/UserServlet" enctype="multipart/form-data">
				<div class="row">
					<!-- Column -->
					<div class="col-lg-4 col-xlg-3 col-md-5">
						<div class="card">
							<div class="card-body">
								<center class="m-t-30">
									<div class="aui-info">
										<img src="#" class="img-circle" width="150" />
										<input type="file" id="userPicture" name="userPicture" class="fileInput">
									</div>
									<h6 class="card-subtitle" style="margin: 5px;">点击头像更换图片</h6>
									<h4 class="card-title m-t-10">${sessionScope.userName}</h4>
									<h6 class="card-subtitle"></h6>
									<div class="row text-center justify-content-md-center"></div>
								</center>
							</div>
						</div>
					</div>
					<!-- Column -->
					<!-- Column -->
					<div class="col-lg-8 col-xlg-9 col-md-7">
						<div class="card">
							<!-- Tab panes -->
							<div class="card-body">

								<input type="hidden" name="op" value="updateInfo">
								<div class="form-group">
									<label class="col-md-12">昵称</label>
									<div class="col-md-12">
										<input type="text" placeholder="用户名" name="userName"
											class="form-control form-control-line" id="userName" required="required">
									</div>
								</div>
								<div class="form-group">
									<label for="example-email" class="col-md-12">邮箱</label>
									<div class="col-md-12">
										<input type="email" placeholder="邮箱"
											class="form-control form-control-line" id="userContact" name="userContact" required="required">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-12">密码</label>
									<div class="col-md-12">
										<input type="password" placeholder="非纯数字" name="userPassword"
											class="form-control form-control-line" id="userPassword" >
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-12">个人简介</label>
									<div class="col-md-12">
										<textarea rows="5" placeholder="介绍一下自己" name="userIntro"
											class="form-control form-control-line" id="userIntro" ></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-12">
										<button type="submit" class="btn btn-success">更新资料</button>
									</div>
								</div>

							</div>
						</div>
					</div>
					<!-- Column -->
				</div>
			</form>
			<!-- Row -->
			<!-- ============================================================== -->
		</div>
		<!-- ============================================================== -->

		<!-- ============================================================== -->
	</div>
</body>

</html>